{{#if showCoupon}}
<section class="country">
  <label for="coupon">Coupon</label>
  <input id="coupon" name="coupon" placeholder="Gimmie the magic" value="{{values.coupon}}">
  <span class="highlight">🎉 {{values.discount}}</span>
  <p><small>The discount will be applied to the price below.</small></p>
</section>
{{/if}}

<section class="payment-type">
  <span class="label">Plan</span>
  <div class="options">
    <label class="hasinput" for="yearly"><input id="yearly" type="radio" name="subscription" {{#equal values.subscription "yearly"}}checked{{/equal}}{{#unless values.subscription}}checked{{/unless}} value="yearly">Yearly <span data-price="99.99" id="price-yearly">£99<small>.99</small></span><small>+VAT</small> <span class="highlight">&ndash; saving <span data-price="55" id="discount">£55</span></span> </label>
    <label class="hasinput" for="monthly"><input id="monthly" {{#equal values.subscription "monthly"}}checked{{/equal}} type="radio" name="subscription" value="monthly">Monthly <span id="price-monthly" data-price="12.99">£12<small>.99</small></span><small>+VAT</small></label>
  </div>
</section>

<p class="payment-errors">{{{flash}}}</p>

<div class="payment-details">
  <div>
    <label for="email">Email</label>
    <span class="inputWithImage payment-details-email">
      <b class="icon-mail"></b>
      <input {{#unless user}}disabled{{/unless}} id="email" value="{{values.email}}" {{#unless values.email}}autofocus{{/unless}} placeholder="you@example.com" type="email" name="email" required>
    </span>
  </div>

  <div>
    <label for="cardnumber">Card details</label>
    <div class="carddetails">
      <span class="inputWithImage payment-details-card-number">
        <b class="icon-credit"></b>
        <input {{#unless user}}disabled{{/unless}} {{#if values.email}}autofocus{{/if}} id="cardnumber" placeholder="Card number" value="{{values.number}}" type="text" name="number" x-autocompletetype="cc-number" required data-stripe="number">
      </span>
      <span class="inputWithImage payment-details-card-date">
        <b class="icon-calendar-o"></b>
        <input {{#unless user}}disabled{{/unless}} id="expiry" value="{{values.expiry}}" placeholder="MM / YY" type="text" name="expiry" size="7" required x-autocompletetype="cc-exp" maxlength="9" data-stripe="expiry">
      </span>
      <span class="inputWithImage payment-details-card-cvc">
        <b class="icon-lock"></b>
        <input {{#unless user}}disabled{{/unless}} id="cvc" placeholder="CVC" value="{{values.cvc}}" type="text" name="cvc" size="4" pattern="\d*" x-autocompletetype="cc-csc" required  autocomplete="off" data-stripe="cvc">
      </span>
    </div>
  </div>
</div>

<section class="buyer-type">
  <input id="business" type="checkbox" name="buyer_type" {{#equal values.buyer_type "business"}}checked{{/equal}} value="business">
  <label for="business">Paying as a business</label>
</section>

<section class="business{{#equal values.buyer_type "business"}}{{else}} disabled{{/equal}}">
  <div>
    <label for="country">Country</label>
    <select name="country" id="country" data-stripe="address_country">
      {{> country}}
    </select>
  </div>

  <div class="disabled vat">
    <label for="vat">VAT</label>
    <span id="vatiso"></span>
    <input id="vat" name="vat" type="text" value="{{values.vat}}">
    <button id="validateVat">Check</button>
    <br>
  </div>
  <small class="fadeout">Powered by <a href="https://taxtools.io">taxtools.io</a></small>
</section>


<section>
  <button class="actionButton actionButton-rounded actionButton-primary actionButton-jumbo" {{#unless user}}disabled{{/unless}} id="pay">Upgrade!</button>
  <input type="hidden" name="_csrf" value="{{token}}">
</section>

<section class="footnotes">
  <p class="options ccy"><small><span class="ccy-legend">Show currency in</span> <label for="ccy-gbp"><input type="radio" value="GBP" name="ccy" checked id="ccy-gbp"> GBP</label> <label for="ccy-usd"><input type="radio" value="USD" name="ccy" id="ccy-usd"> USD</label> <label for="ccy-eur"><input type="radio" name="ccy" value="EUR" id="ccy-eur"> EUR</label></small></p>
  <p class="ccy-note" hidden><small>Note that you will be invoiced in GBP, and that non-GBP prices are approximated using Google forex rates.</small></p>

  <p><small>Note that VAT does not apply outside the European Union. If your EU company is registered for VAT outside the UK, then VAT will not be added.</small></p>
</section>
